<template>
	<view>
		<view class="all">
			<view class="all-nav">
				<view class="top">
					<view class="top-left">
						<text class="font-color">借贷</text>
					</view>
					<view class="top-center">
						<image class="inco-img" src="https://z3.ax1x.com/2021/05/07/g1BS9H.png"></image>
						<view class="center-input">
							<input class="input" placeholder="搜索相关信息" />
						</view>
					</view>
					<view class="top-right">
						<image class="right-icon" src="../../static/icon/xinxitu.png"></image>
					</view>
				</view>
				<view class="layout">
					<view class="layout-flat">
						<view class="layout-one">
							<text>最高可借额度</text>
						</view>
						<view class="layout-two">
							<text>200,000,00</text>
						</view>
						<view class="layout-three">
							<text>审批便捷 | 年综合费率最低可至7.2%</text>
						</view>
						<view class="layout-four">
							<text class="four-text">同意协议并领取</text></view>
						<view class="layout-five">
							<text>同意</text><text class="five-navigat">翔瑞借贷协议及信息授权</text>
						</view>
						<view class="layout-six">
							<text class="six-text">三步领取</text>
							<text class="six-texts">1 实名认证 ----> 2 银行卡认证 ----> 3 信用评估</text>
						</view>
					</view>
					
					<view class="mian">
						<view class="mian-box">
							<image class="mian-image" src="../../static/icon/qiangfeng.png"></image>
							<text>抢疯了</text>
						</view>
						<view class="mian-boxs">
							<image class="mian-image" src="../../static/icon/mianxi.png"></image>
							<text>30天免息</text>
						</view>
						<view class="mian-boxs">
							<image class="mian-image" src="../../static/icon/renwu.png"></image>
							<text>做任务</text>
						</view>
						<view class="mian-boxs">
							<image class="mian-image" src="https://z3.ax1x.com/2021/04/16/cRzrnJ.png"></image>
							<text>兑好礼</text>
						</view>
						<view class="mian-boxs">
							<image class="mian-image" src="../../static/icon/zhuanjiang.png"></image>
							<text>赚奖励</text>
						</view>
						
					</view>
				</view>
				<view class="nav-popr">
					<view class="nav-coupl">
						<view class="nav-couple"></view>
						<text class="nav-couples">新人专享礼</text>
					</view>
					<view class="nav-geter" style="background-image: url(https://z3.ax1x.com/2021/04/16/cWStDH.png);">
						<view class="get-left">
							<view class="get-zui">最高</view>
							<view class="get-yuan">90<text>元</text> </view>
						</view>
						<view class="get-right">
							<view class="grt-topo">新人免息卷</view>
							<text>翔瑞借首次借款可用</text>
						</view>
						<view class="btu-huo">
							<view class="huoqued">获取额度</view>
						</view>
					</view>
				</view>
				<view class="floor">
					<view class="floor-couple"></view>
					<view class="floor-couples">省心省钱</view>
					<text>借现金</text>
					<text>更懂你</text>
				</view>
				<view class="foot">
						<view class="foot-font">升级贷</view>
						<view class="font-box">
							<view class="foot-box">纯信用</view>
							<view class="foot-boxs">额度循环</view>
							<view class="foot-boxs">随借随还</view>
							<view class="foot-bttn">去开通</view>
						</view>
						<view class="footer">
							<text>最高可借额度（元）</text>
						    <text class="shu-qian">300,000,00</text>
						</view>
				</view>
				<view class="foot">
						<view class="foot-font">省心借</view>
						<view class="font-box">
							<view class="foot-one">日息低至万三</view>
							<view class="foot-ones">门槛低到帐快</view>
							<view class="foot-bttns">去开通</view>
						</view>
						<view class="footer">
							<text>最高可借额度（元）</text>
						    <text class="shu-qian">200,000,00</text>
						</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>

.all{
	width: 750rpx;
	height: 1640rpx;
	opacity: 1;
}
.all-nav{
	height: 400rpx;
	background-color: #3476F1;
}
.top{
	height: 100rpx;
	display: flex;
}
.top-left{
	text-align: center;
	line-height: 100rpx;
	margin-left: 20rpx;
}
.top-left .font-color{
	font-size: 42rpx;
	font-weight: 600;
	color: #FFFFFF;
}
.top-center{
	width: 530rpx;
	height: 60rpx;
	margin: 20rpx;
	background-color: #FFFFFF;
	border-radius: 60rpx;
	display: flex;
}
.top-center .inco-img{
	width: 24rpx;
	height: 24rpx;
	margin: 16rpx;
}
.top-center .center-input{
	width: 400rpx;
	margin: 6rpx;
}
.center-input .input{
	color: #333333;
	font-size: 24rpx;
}
.top-right{
	margin-top: 20rpx;
}
.top-right .right-icon{
	width: 60rpx;
	height: 60rpx;
}
.layout{
	height: 600rpx;
	background-color: #FDFDFD;
	margin-top: 100rpx;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
	
}
.layout-flat{
	width: 710rpx;
	height: 530rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 20rpx;
	position: absolute;
	top: 90rpx;
}
.layout-one{
	height: 30rpx;
	line-height: 30rpx;
	text-align: center;
	font-size: 24rpx;
	color: #666666;
	margin-top: 40rpx;
}
.layout-two{
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	font-size: 44rpx;
	color: #333333;
	font-weight: 500;
	margin-top: 24rpx;
}
.layout-three{
	height: 30rpx;
	line-height: 30rpx;
	text-align: center;
	font-size: 24rpx;
	color: #999999;
	margin-top: 42rpx;
}
.layout-four{
	width: 560rpx;
	height: 88rpx;
	background-color: #3476F1;
	border-radius: 60rpx;
	margin-left: 80rpx;
	margin-top: 60rpx;
	text-align: center;
	line-height: 88rpx;
}
.four-text{
	height: 60rpx;
	font-size: 28rpx;
	color: #FFFFFF;
}
.layout-five{
	margin-top: 24rpx;
	font-size: 20rpx;
	color: #999999;
	text-align: center;
}
.layout-five .five-navigat{
	color: #3476F1;
}
.layout-six{
	height: 64rpx;
	background-color: #EAF1FE;
	margin: 24rpx;
	text-align: center;
	line-height: 64rpx;
	display: flex;
	flex-wrap: wrap;
}
.layout-six .six-text{
	width: 40rpx;
	height: 64rpx;
	line-height: 32rpx;
	font-size: 20rpx;
	color: #333333;
	margin-left: 20rpx;
}
.layout-six .six-texts{
	font-size: 24rpx;
	color: #333333;
	margin-left: 20rpx;
}
.mian{
	position: absolute;
	top: 650rpx;
	height: 160rpx;
	display: flex;
}
.mian-box{
	width: 90rpx;
	height: 140rpx;
	margin-left: 32rpx;
	text-align: center;
}
.mian .mian-image{
	width: 88rpx;
	height: 88rpx;
}
.mian text{
	margin-top: 14rpx;
	font-size: 24rpx;
	color: #666666;
}
.mian-boxs{
	width: 110rpx;
	height: 140rpx;
	margin-left: 42rpx;
	text-align: center;
}
.nav-popr{
	height: 280rpx;
}
.nav-coupl{
	height: 50rpx;
	display: flex;
	line-height: 50rpx;
	margin-left: 24rpx;
}
.nav-couple{
	width: 8rpx;
	height: 30rpx;
	line-height: 30rpx;
	background: #3476F1;
	opacity: 1;
	border-radius: 6rpx;
	margin-top: 10rpx;
}
.nav-couples{
	font-size: 32rpx;
	font-weight: 500;
	margin-left: 16rpx;
}
.nav-geter{
	width: 646rpx;
	height: 156rpx;
	background-repeat: no-repeat;
	background-size: contain;
	margin-left: 24rpx;
	margin-top: 20rpx;
	display: flex;
}
.get-left{
	width: 130rpx;
	height: 60rpx;
	display: flex;
	margin-left: 30rpx;
	padding-top: 40rpx;
}
.get-zui{
	width: 20rpx;
	font-size: 16rpx;
	color: #FFFFFF;
	margin-top: 10rpx;
}
.get-yuan{
	font-size: 48rpx;
	color: #FFFFFF;
	font-weight: 600;
}
.get-yuan text{
	font-size: 22rpx;
}
.get-right{
	width: 220rpx;
	height: 120rpx;
	border-left: #222222;
	margin-top: 20rpx;
	padding-left: 50rpx;
}
.grt-topo{
	margin-top: 10rpx;
	font-size: 28rpx;
	color: #FFFFFF;
}
.get-right text{
	font-size: 24rpx;
	color: #FFFFFF;
}
.btu-huo{
	width: 158rpx;
	height: 48rpx;
	margin-left: 22rpx;
	background-color: #FFFFFF;
	margin-top: 50rpx;
	border-radius: 50rpx;
}
.btu-huo .huoqued{
	font-size: 24rpx;
	color: #e2bc7f;
	text-align: center;
	line-height: 46rpx;
}
.floor{
	height: 50rpx;
	display: flex;
	line-height: 50rpx;
	margin-left: 24rpx;
}
.floor-couple{
	width: 8rpx;
	height: 30rpx;
	line-height: 30rpx;
	background: #3476F1;
	opacity: 1;
	border-radius: 6rpx;
	margin-top: 10rpx;
}
.floor-couples{
	font-size: 32rpx;
	font-weight: 500;
	margin-left: 16rpx;
}
.floor text{
	font-size: 24rpx;
	color: #999999;
	margin-left: 18rpx;
	line-height: 60rpx;
}
.foot{
	margin-top: 20rpx;
	width: 702rpx;
	height: 210rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
	opacity: 1;
	border-radius: 12rpx;
	margin: 20rpx;
}
.foot-font{
	width: 96rpx;
	height: 44rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	line-height: 44rpx;
	color: #333333;
	opacity: 1;
	margin-left: 30rpx;
}
.font-box{
	display: flex;
}
.foot-box{
	width: 90rpx;
	height: 38rpx;
	border: 2rpx solid #3476F1;
	opacity: 1;
	border-radius: 4rpx;
	text-align: center;
	width: 60rpx;
	height: 28rpx;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 28rpx;
	color: #3476F1;
	opacity: 1;
	margin-left: 30rpx;
	margin-top: 14rpx;
}
.foot-boxs{
	width: 106rpx;
	height: 38rpx;
	border: 2rpx solid #53B6C8;
	opacity: 1;
	border-radius: 4rpx;
	width: 80rpx;
	height: 28rpx;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 28rpx;
	color: #53B6C8;
	opacity: 1;
	margin-left: 20rpx;
	margin-top: 14rpx;
}
.foot-one{
	width: 146rpx;
	height: 38rpx;
	border: 2rpx solid #3476F1;
	opacity: 1;
	border-radius: 4rpx;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 38rpx;
	text-align: center;
	color: #3476F1;
	margin-left: 30rpx;
	margin-top: 14rpx;
}
.foot-ones{
	width: 146rpx;
	height: 38rpx;
	border: 2rpx solid #53B6C8;
	opacity: 1;
	border-radius: 4rpx;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	text-align: center;
	line-height: 38rpx;
	color: #53B6C8;
	margin-left: 20rpx;
	margin-top: 14rpx;
}
.foot-bttn{
	width: 174rpx;
	height: 64rpx;
	background: #3476F1;
	opacity: 1;
	border-radius: 44rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	text-align: center;
	line-height: 64rpx;
	color: #FFFFFF;
	margin-left: 126rpx;
}
.foot-bttns{
	width: 174rpx;
	height: 64rpx;
	background: #3476F1;
	opacity: 1;
	border-radius: 44rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	text-align: center;
	line-height: 64rpx;
	color: #FFFFFF;
	margin-left: 86rpx;
}
.footer{
	width: 440rpx;
	height: 44rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 34rpx;
	color: #999999;
	opacity: 1;
	margin-top: 38rpx;
	display: flex;
	margin-left: 30rpx;
}

.shu-qian{
	width: 184rpx;
	height: 44rpx;
	font-size: 36rpx;
	font-family: Lato;
	font-weight: bold;
	line-height: 44rpx;
	color: #F85656;
	opacity: 1;
	
}
</style>
